<template>

	<view class="categoryContainer">
		<!-- 头部 -->
		<view class="searchHeader">
			<view class="search" @click="toSearch">
				<u-icon name="search"></u-icon>
				搜索
			</view>
		</view>
		<view class="contentContainer">
			<!-- 左侧  分类列表左侧页面结构的实现 -->
			<!-- :class="{activeClass:navId===navItem.id}"  左侧导航栏的高亮切换功能的实现 -->
			<view class="leftContainer">
				<scroll-view scroll-y class="navScroll">
					<view class="navItem" v-for="(navItem,index) in classificationList "
					:key='navItem.id'
					:class="{activeClass:navId===navItem.id}"
					@click="changeNav(navItem.id)"
					>{{navItem.name}}</view>
					
					
				</scroll-view>
			</view>
			<!-- 右侧   分类列表右侧页面结构的实现-->
			<view class="rightContainer">
				<view class="navContainer" >
					<scroll-view scroll-x="true" class="contentTopScroll" enable-flex >
						<view  v-for="(navItem,index) in classificationListObj " :key="navItem.id">
							<view class='contentItem' v-for="item in navItem.tabList" :key="item">
								<u-tag  :text="item.title" mode="light" type='success'/>
							</view>
						</view>
							
						
					</scroll-view>		
				</view>
			    <u-line class="u-line"></u-line>
				 
					<!-- 商品分类的渲染 -->

				
					<view class='categoryList'>
							<view v-for="(navItem,index) in classificationListObj " :key="navItem.id">
								<view class="categoryListItem"  v-for="item in navItem.tabList" :key="item" >
										<text class="categoryListItemText">{{item.title}}</text>
										<u-line class="u-line"></u-line>
										<!-- 商品item -->
										<view class="goodsItem" @click="toProductDetails"
										v-for="goodsItem in item.rightList" :key="goodsItem"
										>
											<view class="itemDescription">
												<!-- 推荐图片 -->
												<view class="itemDescriptionImageContainer">
													<image src="../../static/image/category/00-07-60.jpg" mode=""></image>
												</view>
												<view class="itemDescriptionRight">
													<view class="itemDescriptionRightTitle">{{goodsItem.title}}</view>
													<view class="itemDescriptionRightTitleTrait">
														<p>香浓醇厚</p>
														<i>|</i>
														<p>淡淡咸味</p>
													</view>
													<view class="shopPrice">
														<text class="iconPrice">￥</text>
														<text class="price">{{goodsItem.price}}</text>
													</view>
													<view class="shopVipPrice">
														<text class="VipIconPrice">￥</text>
														<text class="VipPrice">{{goodsItem.vipPrice}}</text>
														<u-icon name="level" color="#447B49" size="20" label='绿卡价' label-size='20' margin-left='1rpx' label-color='#447B49'></u-icon>
														<!-- <text class="greenCardPrice">绿卡价</text> -->
														<view class="shopping-cart">
															<u-icon name="shopping-cart" color='#EDFFE5' size='30rpx' top='0' left='10'></u-icon>
														</view>	
													</view>
												</view>
												
											</view>
											<u-line class="u-line"></u-line>
										</view>	
									</view>
								</view>	
							</view>	
					</view>
					</view>
				
						
				
					
		
	 </view>
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import request from '../../utils/request.js'
export default {
	data() {
		return {

			navId: 0,
		};
	},
	computed:{
		...mapState("indexModule",["classificationList"]),
		classificationListObj(){
			return(this.classificationList.filter(item=>item.id===this.navId))
		}
	},

	methods:{
		...mapActions("indexModule",["getClassification"]),
		changeNav(navId){
			this.navId=navId
			this.getClassification()
		},
		// 跳转到商品详情页
		toProductDetails(){
			uni.navigateTo({
				url:'../productDetails/productDetails'
			})
		},
		// 跳转到搜索页
		toSearch(){
			uni.navigateTo({
				url:'../search/search'
			})
		},
		...mapActions('classifitionModule',['getClassification'])
		
	},

	async mounted() {
	   await this.getClassification()
		this.navId=this.classificationList[0].id
    }
	
	
	
}
</script>

<style lang="scss">
.categoryContainer{
	.searchHeader{
		width: 100%;
		height:56rpx;
		padding :10rpx 0;
		.search{
		  	width: 94%;
		  	height: 56rpx;
		  	line-height: 56rpx;
		  	background :#F6F7F8;
		  	margin: 0 auto;
		  	text-align: center;
		  	font-size :28rpx;
		  	border-radius: 10rpx;	
		}
	}
		
	.contentContainer{
		display: flex;
		height: calc(100vh - 86rpx);
		margin-top: 10rpx;
		.leftContainer{
			width :25%;
			background-color: #F6F7F8;
			.navScroll{
				height: 100%;
				.navItem{
						position: relative;
						font-size :26rpx;
						text-align: center;
						line-height: 80rpx;
						&.activeClass:after{
							content: '';
							width: 6rpx;
							height: 70%;
							background-color: #4FB960;
							position: absolute;
							left: 6rpx;
							top :10%;
						}
							
				}
				.activeClass{
					background-color: #FEFFFF;
				}
			}	
		}
		.rightContainer{
			width :75%;
			padding-left: 20rpx;
			.navContainer{
				.contentTopScroll{
					display: flex;
					white-space: nowrap;
					height: 60rpx;
					margin-bottom: 10rpx;				
					.contentItem{
						  display: inline-block;
						  width: 180rpx;
						  height: 60rpx;
						  text-align: center;
						  line-height: 60rpx ;
						  margin-right: 10rpx;
					  }				   
				}
			}  
			.categoryList{
				.categoryListItem{
					width: 100%;
					height: auto;
					.categoryListItemText{
						height: 80rpx;
						font-size: 26rpx;
						color: #6B6C6D;
						line-height: 80rpx;
					}	
				    .itemDescription{
						height: auto;
						width: 100%;
						padding: 20rpx;
						// background-color: red;
						box-sizing: border-box;
						display: flex;
						justify-content: space-between;
						.itemDescriptionImageContainer{
							height: 160rpx;
							width: 160rpx;
							border-radius: 5rpx;
							margin-right: 25rpx;
							image{
								height: 100%;
								width: 100%;
							}
						}
						.itemDescriptionRight{
							flex: 1;
							height: auto;
							.itemDescriptionRightTitle{
							  width: 100%;
							  line-height: 50rpx;
							  height: 50rpx;
							  color: #252627;
							  font-size: 26rpx;
							  text-overflow: ellipsis;
							  overflow: hidden;
							  white-space: nowrap;	
							}
							.itemDescriptionRightTitleTrait{
								display: flex;
								font-size: 20rpx;
								color: #AEAfB0;
								i{
									margin: 0 6rpx;
								}
							}
							.shopPrice{
								margin-top: 16rpx;
								height: 28rpx;
							  .iconPrice{
								  font-size: 24rpx;
								  color: #FB686A;
							  }	
							  .price{
								   color: #FB686A;
								   font-size: 28rpx;
							  }
							}
							.shopVipPrice{
								// display: flex;
								position: relative;
								height: 24rpx;
								.VipIconPrice{
									font-size: 24rpx;
									color: #447B49;							  
								}	
								.VipPrice{
									font-size:24rpx ;
									color: #447B49;
									margin-right: 10rpx;
								}
								.shopping-cart{
									display: inline-block;
									height: 40rpx;
									width: 40rpx;
									background-color: #5BBE69;
									border-radius: 50%;
									text-align: center;
									line-height: 40rpx;
									position: absolute;
									bottom: -5rpx;
									right: 5rpx;
									
								}
							
								// .greenCardPrice{
								// 	height: 10rpx;
								// 	width: 10rpx;
								// 	background-color: #215244;
								// 	font-size: 18rpx;
								// 	color: #C7F6E0;
								// 	margin-left: 16rpx;
								// }
							}
						}
					}
				}		 
			}  
		}
	}			  
}
	

</style>
